import { Flex, Menu } from "antd"
import type { MenuProps } from "antd"
import { Route, Routes, useNavigate } from 'react-router-dom'

type MenuItem = Required<MenuProps>['items'][number];

const items: MenuItem[] = [
	{
		label: '设备类型',
		key: '/home/a1',
	}, {
		label: '设备类型2',
		key: '/home/a2'
	}
];

function A1() {
	return (
		<div>A1</div>
	)
}

function A2() {
	return (
		<div>A2</div>
	)
}

export const Home: React.FC = () => {

	const nav = useNavigate();


	return (
		<Flex vertical={true} style={{ width: '100%' }}>
			<Menu onClick={(info) => nav(info.key) } mode={'horizontal'} items={items}></Menu>
			<Routes>
				<Route path="/a1" element={ <A1/> } />
				<Route path="/a2" element={ <A2/> } />
			</Routes>

		</Flex>
	)
}
